<template>
	<view class="container">

		<text class="time">支付截止时间 {{ countdown }}</text>
		<text class="amount">¥ {{ amount }}</text>
		<text class="restaurant">智护康途-{{ number }}</text>
		<view class="payment-method">
			<view class="pay-method">
				<image src="../../static/images/wechat.png" class="pay-icon" />
				<text class="pay-text">微信支付</text>
			</view>
			<uni-icons type="checkbox" size="30" color="#28B389"></uni-icons>
		</view>
		<button class="confirm-button" @click="confirmPayment">确认支付</button>
	</view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { createOrder, payOrder } from '@/api/apis.js'
import { ref } from 'vue'

const amount = ref('') // 用于存放订单金额
const number = ref('') // 用于存放订单号
const countdown = ref('') // 用于存放倒计时时间

onLoad(async (e) => {
	// console.log('onLoad', e)
	await createOrder(e.staffId).then(res => {
		// console.log('createOrder', res)
		amount.value = res.data.amount
		number.value = res.data.number

		// 计算结束时间
		const endTime = new Date(new Date(res.data.orderTime).getTime() + 15 * 60000);
		startCountdown(endTime);
	}).catch(err => {
		// console.log('createOrder err', err)
		if (err.code === 0) {
			uni.showModal({
				title: '提示',
				content: err.msg,
				showCancel: false,
				success: (res) => {
					uni.navigateBack({
						delta: 1,
					});
				}
			})
		}
	})
})

const confirmPayment = async () => {
	console.log(number.value);
	await payOrder(number.value).then(res => {
		console.log('payOrder', res)
		uni.showToast({
			title: '支付成功',
			icon: 'success',
			duration: 1000,
			success: (res) => {
				console.log("toast success", res);
				uni.redirectTo({
					url: '/pages/historyOrder/historyOrder'
				})
			}
		})
	}).catch(err => {
		console.log('payOrder err', err)
		uni.showModal({
			title: '提示',
			content: err.msg,
			showCancel: false,
			success: (res) => {
				uni.navigateBack({
					delta: 1,
				});
			}
		})
	})
}
const startCountdown = (endTime) => {
	const updateCountdown = () => {
		const now = new Date(); // 获取当前时间
		const remainingTime = endTime - now; // 计算剩余时间
		if (remainingTime <= 0) {
			countdown.value = "订单已过期";
			clearInterval(interval);
		} else {
			const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
			const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
			countdown.value = `${minutes}分 ${seconds}秒`; // 更新倒计时显示
		}
	}
	updateCountdown(); // 初始化时更新一次倒计时
	const interval = setInterval(updateCountdown, 1000); // 每秒更新一次
	onUnmounted(() => {
		clearInterval(interval); // 组件卸载时清除定时器
	});
}



</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	width: 100%;
	background-color: #eee;

	.time {
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #666;
	}

	.amount {
		font-size: 72rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.restaurant {
		font-size: 28rpx;
		margin: 20rpx 0;
		color: #666;

	}

	.payment-method {
		width: 98%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 5px;

		.pay-method {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10px;

			.pay-icon {
				width: 26px;
				height: 26px;
				margin-right: 10px;
			}

			.pay-text {
				font-size: 18px;
			}
		}



	}

	.confirm-button {
		width: 98%;
		background-color: $brand-theme-color;
		color: #fff;
		border-radius: 5px;
		border: none;
		cursor: pointer;
		position: fixed;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
	}


}
</style>
